<template>
  <div class="wh100 p15">
    <div class="common-content wh100 p15">
      <div class="top-search-bar">
        <el-form size="small" ref="queryForm" inline>
          <el-form-item label="">
            <el-input
                style="width: 190px"
                v-model="query.name"
                placeholder="按公告标题"
                @input="inputChange"
                clearable></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select
                style="width: 190px"
                v-model="query.type"
                placeholder="按公告类型"
                @change="inputChange"
                clearable>
              <el-option label="公告" value="0"></el-option>
              <el-option label="通知" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
          <el-select
              style="width: 190px"
              v-model="query.status"
              placeholder="按公告状态"
              @change="inputChange"
              clearable>
            <el-option label="正常" value="0"></el-option>
            <el-option label="关闭" value="1"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item>
            <el-button
                v-if="auth&&auth.add"
                type="primary"
                icon="el-icon-plus"
                @click="addNotice()">新增
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <Table
          ref="table"
          :table-header="tableHeader"
          :tableData="lists"
          :pg-total-num="total"
          :max-height="tableMaxHeight"
          :page.sync="page"
          :limit.sync="limit"
          @pagination="pagination">
        <div slot="operation" slot-scope="row">
          <i class="el-icon-edit table-btn" @click="edit(row)" title="修改角色" v-if="auth&&auth.edit"></i>
          <i class="el-icon-delete table-btn del" @click="del(row)" title="角色删除" v-if="auth&&auth.del"></i>
        </div>

        <div slot="noticeType" slot-scope="row" style="line-height: 1;">
          <el-tag v-if="parseInt(row.data.noticeType)===0" type="success" size="mini" effect="dark">公告</el-tag>
          <el-tag v-else type="warning" size="mini" effect="dark">通知</el-tag>
        </div>
        <div slot="noticeStatus" slot-scope="row" style="line-height: 1;">
          <el-tag v-if="parseInt(row.data.noticeStatus)===0" type="success" size="mini" effect="dark">正常</el-tag>
          <el-tag v-else type="danger" size="mini" effect="dark">关闭</el-tag>
        </div>
      </Table>
    </div>

    <!--新增弹窗-->
    <AddNoticeDailog ref="addNoticeDailog" @success="getLists"></AddNoticeDailog>
    <EditNoticeDailog ref="editNoticeDailog" @success="getLists"></EditNoticeDailog>
  </div>
</template>

<script>
import Table from "@/components/Table";
import AddNoticeDailog from "./comp/AddNoticeDailog";
import EditNoticeDailog from "./comp/EditNoticeDailog";

export default {
  name: "notice",
  components: {Table, AddNoticeDailog, EditNoticeDailog},
  data() {
    return {
      auth: null,
      tableMaxHeight: '50px',
      tableHeader: [
        {prop: "noticeTitle", name: "公告标题", width: 200},
        {prop: "noticeType", name: "公告类型", tag: true, width: 100},
        {prop: "noticeStatus", name: "公告状态", tag: true, width: 100},
        {prop: "noticeContent", name: "公告内容", tooltip: true, minWidth: 200},
        {prop: "addTime", name: "添加时间", width: 150},
        {prop: "editTime", name: "修改时间", width: 150},
        {prop: "remarks", name: "备注", minWidth: 100},
        {prop: "operation", name: "操作", width: 150, slot: true}
      ],
      lists: [],
      page: 1,
      query: {
        name: ''
      },
      limit: 10,
      total: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.tableMaxHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50 - 30 - 48 + 'px'
    })
    this.getLists()
  },
  methods: {
    getLists() {
      this.$api.getNoticeListByPage({
        pageNum: this.page,
        pageSize: this.limit,
        noticeTitle: this.query.name,
        noticeStatus: this.query.status,
        noticeType: this.query.type,
      }).then(res => {
        this.auth = res.data.auth
        this.total = res.data.data.total
        this.lists = res.data.data.records.map(item => {
          return {
            ...item,
            addTime: this.$moment(item.addTime).format("YYYY-MM-DD HH:mm:ss"),
            editTime: item.editTime && this.$moment(item.editTime).format("YYYY-MM-DD HH:mm:ss") || ''
          }
        })
      })
    },
    pagination() {
      this.getLists()
    },
    inputChange() {
      this.getLists()
    },
    // 新增
    addNotice() {
      this.$refs.addNoticeDailog.show()
    },
    // 修改
    edit(row) {
      this.$refs.editNoticeDailog.show({
        id: row.data.id,
        noticeTitle: row.data.noticeTitle,
        noticeType: row.data.noticeType,
        noticeStatus: row.data.noticeStatus,
        noticeContent: row.data.noticeContent,
        remarks: row.data.remarks
      })
    },
    // 删除
    del(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "error",
        confirmButtonClass: 'el-button--danger'
      }).then(() => {
        this.$api.delNotice({
          id: row.data.id,
        }).then(res => {
          this.$message.success(res.data.msg)
          this.getLists()
        })
      }).catch(() => {
      });
    }
  }
}
</script>

<style scoped lang="scss">

</style>